<template>
	<modeBoxTemplate>
		<p class="title">路径列表</p>
		<div class="path-list scroll">
			<div class="path-item" v-for="(item, index) in paths" :key="item.path" :title="item.path">
				<p class="text beyond-hiding-reverse">{{ item.path.split('').reverse().join('') }}</p>
				<div class="delete flex-center" v-show="item.deletable">
					<el-icon title="移除此路径" @click="removePath(index)"><Close /></el-icon>
				</div>
			</div>
		</div>
		<el-button type="primary" @click="addPath">添加文档</el-button>
	</modeBoxTemplate>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { API } from '@v/utils/API';
import modeBoxTemplate from '../modeBoxTemplate.vue';
import { useRootStore } from '@v/store';
import { useMode5Store } from '@v/store/mode/mode5';
import { ElNotification } from 'element-plus';
import { Close } from '@element-plus/icons-vue';

const store = useRootStore();
const mode5Store = useMode5Store();

interface Paths {
	// 路径
	path: string;
	// 是否可删除
	deletable: boolean;
}

const paths = reactive<Paths[]>([
	{
		path: store.filePath as string,
		deletable: true,
	},
]);

// 添加路径
function addPath() {
	API.invoke('select-md-file', '添加文档', void 0, true).then((arr) => {
		if (arr) {
			const existent: string[] = [];

			arr.forEach((path) => {
				if (paths.some((t) => t.path === path)) {
					existent.push(path);
				} else {
					paths.push({ path, deletable: true });
				}
			});

			if (existent.length > 0) {
				ElNotification({
					title: '提示',
					message: '以下路径已在列表中：\n' + existent.join(',\n'),
					type: 'warning',
					position: 'top-left',
				});
			}
		}
	});
}

// 移除路径
function removePath(index: number) {
	paths.splice(index, 1);
}

// 获取图片引用关系
function getImageCitationInfo() {
	API.invoke(
		'get-image-citation-info',
		paths.map((t) => t.path)
	).then((value) => {
		mode5Store.setImageCitationInfo(value);
		store.setDrawer_isShow(true);
	});
}

watch(paths, () => {
	getImageCitationInfo();
});

getImageCitationInfo();
</script>

<style scoped lang="scss">
.title {
	color: var(--text-color-3);
	font-size: 14px;
	margin-bottom: 6px;
}
.path-list {
	border: 1px solid var(--border-color-2);
	border-radius: 4px;
	padding: 4px;
	min-height: 200px;
	max-height: calc(100% - 80px);
	overflow-y: auto;
	overflow-x: hidden;
	margin-bottom: 10px;
	.path-item {
		padding: 6px 12px;
		border-radius: 4px;
		background-color: var(--mouse-hover-bg-color-1);
		overflow: hidden;
		position: relative;
		margin-bottom: 4px;
		&:hover {
			background-color: var(--mouse-hover-bg-color-2);
			.delete {
				display: flex;
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
		.text {
			font-size: 14px;
		}
		.delete {
			display: none;
			position: absolute;
			right: 0;
			top: 0;
			width: 30px;
			height: 100%;
			background-color: var(--aside-bg-color);
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: var(--mouse-hover-bg-color-2);
			}
			:deep(.el-icon) {
				font-size: 15px;
				border-radius: 50%;
				background-color: var(--mouse-hover-bg-color-2);
				padding: 2px;
				&:hover {
					color: var(--theme-danger-color);
				}
			}
		}
	}
}
</style>
